<script setup lang="ts">
import { computed, ref, watch } from 'vue';

// 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}

// 默认的水果列表
const defaultList = ref<Fruit[]>([
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34,
  },
])

// 获取水果列表
function getFruitList() {
  // 获取本地存储的值，分两种情况处理
  const local = localStorage.getItem('list')
  if (local === null) {
    // 没有值，就返回默认的列表
    return defaultList.value
  } else {
    // 有值，就返回本地存储的值
    return JSON.parse(local)
  }
}

// 水果列表，整合了持久化存储
const fruitList = ref<Fruit[]>(getFruitList())

// 如果持久化中没有存储数据，才读取默认值，如果有数据，就使用持久化的。
// const fruitList =
//   localStorage.getItem('list') === null  // 是否有初始值，null 表示本地存储没有值
//     ?
//     ref<Fruit[]>(defaultList.value)  // 没有值，初始化 ref 默认数据
//     :
//     ref<Fruit[]>(JSON.parse(localStorage.getItem('list') || '[]'))  // 有值，就读取本地存储，JSON.parse 转对象

// 监听 fruitList 数组的变化
watch(fruitList, () => {
  // 当 fruitList 变化时，将更新后的数组存储到本地存储中，JSON.stringify 转字符串后再存储
  localStorage.setItem('list', JSON.stringify(fruitList.value))
}, { deep: true, immediate: true }) // deep: true 开启深度侦听，immediate: true 立刻执行

// 删除水果
const deleteFruit = (id: number) => {
  // 通过 id 进行删除数组中的 对应项 → filter(不会改变原数组，需重新赋值)
  fruitList.value = fruitList.value.filter(item => item.id !== id)
}

// 减少水果数量
const decreaseFruit = (id: number) => {
  // find 查找到当前元素
  const activeItem = fruitList.value.find(item => item.id === id)
  // && 短路运算
  activeItem && activeItem.num--
  // if (activeItem) {
  //   activeItem.num--
  // }
  // 补充：findIndex 写法
  // const activeIndex = fruitList.value.findIndex(item => item.id === id)
  // fruitList.value[activeIndex].num--
}

// 增加水果数量
const increaseFruit = (id: number) => {
  const activeItem = fruitList.value.find(v => v.id === id)
  activeItem && activeItem.num++
}

// 通过计算属性，计算全选状态
const isAllSelected = computed({
  // 获取当前全选状态
  get() {
    // 计算结果需要通过 return 返回，使用 every 方法判断所有水果是否都被选中
    return fruitList.value.every(v => v.isChecked)
  },
  // 设置全选状态
  set(value) {
    // 当全选状态改变时，更新每一个水果的选中状态
    fruitList.value.forEach((item) => {
      item.isChecked = value
    })
  }
})

// 0. 计算选中的水果列表
const selectedFruitList = computed(() => {
  return fruitList.value.filter(v => v.isChecked)
})
// 1. 总个数：找到选中的，累加个数即可
const totalCount = computed(() => {
  // 基于选中的列表，计算出总个数
  return selectedFruitList.value.reduce((acc, item) => acc + item.num, 0)
})
// 2. 总价格：找到选中的，累加个数乘以单价
const totalPrice = computed(() => {
  return selectedFruitList.value.reduce((acc, item) => acc + item.price * item.num, 0)
})
</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box">
      <img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" />
    </div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div v-if="fruitList.length > 0" class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div v-for="item in fruitList" :key="item.id" class="tr active">
            <!-- v-model 实现双向绑定 -->
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <!-- 计数器 -->
              <div class="my-input-number">
                <!-- disabled 禁用按钮，小于等于 1 就不能被点击了 -->
                <button :disabled="item.num <= 1" @click="decreaseFruit(item.id)" class="decrease"> - </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button @click="increaseFruit(item.id)" class="increase"> + </button>
              </div>
            </div>
            <div class="td">{{ item.price * item.num }}</div>
            <div class="td"><button @click="deleteFruit(item.id)">删除</button></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <!-- v-model 实现双向绑定，isAllSelected 是计算的结果 -->
          <input type="checkbox" v-model="isAllSelected" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ totalCount }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div v-else class="empty">🛒空空如也</div>
  </div>
</template>

<style scoped>
@import './style/inputnumber.css';
@import './style/index.css';
</style>